<template>
	<view style="background: #f0f3f3;width: 100vw;display: flex;justify-content: center;align-items: center;" :style="{
		minHeight:`100vh`
	}">
		<scroll-view scroll-y="true" style="display: flex;height: 70vh;width: 80vw;">
		<view v-if="getNotice.ContentText" :style="{height:`calc(100% - ${eHeight+4}px)`}" v-html="getNotice.ContentText"></view>	
		<view v-else style="width: 20vw;height: 10vh;display: flex;justify-content:center;align-items: center;">
				规则信息加载中...
		</view>
			</scroll-view>
			
		<view style="width: 70vw; display: flex;align-items: center;position: absolute;left: 50%;transform: translateX(-50%); bottom:3vh;">
			<u-button class="tt" :disabled='disabled'  type="primary" @click="gonext()" :text="`我已阅读并同意以上须知`"></u-button>
		</view>

		</view>

</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
			eHeight:0,
			disabled:true,
			 countdown: 111, // 添加倒计时秒数
			 timer: null // 添加计时器变量
			};
		},
		created() {
			this.Agetnotice()	
			this.countdown=this.getNotice.ReadTimes
			this.timer = setInterval(() => {
            if(this.countdown > 0) {
                this.countdown--
            } else {
                clearInterval(this.timer)
                this.disabled = false
            }
        }, 1000)
		},
	computed: {
			...mapGetters('app',['getNotice'])
		},
		   beforeDestroy() {
        // 组件销毁前清除计时器
        if(this.timer) clearInterval(this.timer)
    },
		mounted() {
		this.$nextTick(() => {
			uni.createSelectorQuery().select('.tt').boundingClientRect(data => {
				this.eHeight = data?.height
			}).exec();
		})	
		},
		methods: {
			...mapActions('app',{
				Agetnotice:'Agetnotice'
			}),
			gonext() {
				this.$Router.push('/pages/home/home')
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-button__text{
		font-size: 20px!important;
	}
	  // ::v-deep ::-webkit-scrollbar {
	  //       // 滚动条整体样式
	  //       display: block;
	  //       width: 10rpx !important;
	  //       height: 10rpx !important;
	  //       -webkit-appearance: auto !important;
	  //       background: transparent;
	  //       overflow: auto !important;
	  //   }
	     
	  //   ::v-deep ::-webkit-scrollbar-thumb {
	  //       // 滚动条里面小方块
	  //       border-radius: 10rpx !important;
	  //       box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
	  //       background-color: #5d9cec !important;
	  //   }
</style>